<template>
  <div>
  
 
     <!-- 单选排序 -->
     <el-radio-group v-model="sortCol">
      <el-radio :label="1">价格排序</el-radio>
      <el-radio :label="2">时间排序</el-radio> 
       
    </el-radio-group>
     

    <el-button
      type="primary"
      icon="el-icon-caret-bottom"
      @click="priceBtnUp()"
    ></el-button>
    <el-button
      type="primary"
      icon="el-icon-caret-top"
      @click="priceBtnDown()"
    ></el-button>
     <el-button
      type="primary"
      icon=""
      @click="unPay()"
    >未支付</el-button> 
    <el-button
      type="primary"
      icon=""
      @click="pay()"
    >已支付</el-button> 
    <el-table
      :data="
        pageData.data.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="订单编号" prop="serial" align="center"> </el-table-column>
      <el-table-column label="订单时间" prop="time" align="center"> </el-table-column>
      <el-table-column label="顾客姓名" prop="customer" align="center"> </el-table-column>
      <el-table-column label="订单金额￥" prop="price" align="center"> </el-table-column>
      <el-table-column label="顾客电话" prop="phone" align="center"> </el-table-column>
      <el-table-column label="订单详情" prop="information"> </el-table-column>
      <el-table-column align="center" width="240px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="medium" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <div id="btn" align="left">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >

            <!-- 删除订单 -->
            <el-button
              size="small"
              type="danger"
              @click="open(scope.$index,scope.row)"
              >删除</el-button
            >

            <!-- 查看订单详情 -->
            <el-button
              size="small"
              type="success"
              @click="handleDetail(scope.$index, scope.row)"
              >详情</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改及详情的弹出对话框 -->
    <!-- 修改详情 -->
    <el-dialog title="修改订单" :visible.sync="updateVisible" width="60%">
      <!-- 3.使用更新子组件 -->
      <OrderUpdate
        :order="currentOrder"
        v-if="refresh"
        @closedialog="updateData"
      ></OrderUpdate>
    </el-dialog>

    <!-- 查看详情 -->
    <el-dialog title="订单详情" :visible.sync="dialogVisible" width="60%">
      <OrderDetail
        :order="currentOrderAndServer"
        :orderAndServer="currentOrderAndServer"
        v-if="refresh"
      ></OrderDetail>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 分页内容 -->
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.currentPage"
      :page-sizes="[5, 10, 15]"
      :page-size="pageData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "../../../axios_config";
import OrderUpdate from "./OrderUpdate";
import OrderDetail from "./OrderDetail";
import http from "../../../axios_config";
import LoginVue from "../../Login.vue";
import Commons from '../../../js/commons'

export default {
  components: {
    OrderDetail,
    OrderUpdate,
  },
  data() {
    return {
        radio: '1',
      sortCol:'',
      rule:'',
      payStatus:'',//支付状态
       refresh: true, //强制刷新子组件
      pageData: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
        totalPages: 0,
        data: [],
        // 排序
      sortCol: "",
      rule: "",
      },
      merchantsOrder: {
        serial: "",
        time: "",
        customer: "",
        phone: "",
        information: "",
      },
      search: "",
      dialogVisible: false, // 详情展示是否显示
      currentOrder: {}, //指向当前被选中的订单信息
      currentOrderAndServer: {},
      updateVisible: false, //更新对话框是否显示
      addVisible: false, //新增对话框是否显示
     
      refreshadd: true,
    };
  },

  created() {
    this.getOrder();
  },

  methods: {
    // 分页方法
    handleSizeChange(size) {
      this.pageData.pageSize = size;
      this.getOrder();
    },
    handleCurrentChange(page) {
      this.pageData.currentPage = page;
      this.getOrder();
    },

    // 查看详情
    handleDetail(index, row) {
        //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      console.log(row);
      this.dialogVisible = true;

      this.currentOrder = row;

      axios
        .post(
          "http://192.168.11.18:8080/serverOrder/serverAndOrderDto/" + row.serial
        )
        .then(({ data }) => {
          console.log("获取dto" + data);
          this.currentOrderAndServer = data;
        });
    },
    //修改订单
    handleEdit(index, row) {
    //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });

      //修改当前被选中的order
      this.currentOrder = row;
      //显示对话框
      this.updateVisible = true;
      
    },

    //删除订单
    open(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let id = row.id;
        
          axios({
            url: "http://192.168.11.18:8080/serverOrder/deleteOne/" + row.id,
            method: "delete",
          }).then(({ data }) => {
            if ((data.state = "SUCCESS")) {
              this.getOrder();
            }
            console.log(data);
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleDelete(index, row) {
      let id = row.id;
      console.log("获取ID" + id);
      axios({
        url: "http://192.168.11.18:8080/serverOrder/deleteOne/" + row.id,
        method: "delete",
      }).then(({ data }) => {
        if ((data.state = "SUCCESS")) {
          this.getOrder();
        }
        console.log(data);
      });
    },
    //获取服务列表
    getOrder() {
      http({
        url:
          "http://192.168.11.18:8080/serverOrder/findByPage/" +
          this.pageData.pageSize +
          "/" +
          this.pageData.currentPage,
        method: "get",
      }).then(({ data }) => {
        console.log(data);
          console.log(data.data.pageSize);
          

        let resutl = data.data;
     
        let array = new Array(resutl.data.length);
      
        for (let i = 0; i < resutl.data.length; i++) {
          if (resutl.data[i].status == 0) {          
            array[i] = resutl.data[i];         
          }
        }
         console.log(array);
        this.pageData.data = array;
       
        this.pageData.total = resutl.total;
        this.pageData.currentPage = resutl.totalPages;
        this.pageData.pageSize = resutl.pageSize;
        this.pageData.currentPage = resutl.currentPage;
      });
    },
    //点击确认更新数据方法
    updateData(data) {
      console.log(data);
      console.log(data.data);
      //关闭对话框
      this.updateVisible = false;
      //更新数据
      
        if (data.id!=null) {
        //数据更新  将新数据展示在对应的位置
        for (let i = 0; i < this.pageData.data.length; i++) {
          let order = this.pageData.data[i];
          if (order.id == data.data.id) {
            //this.tableData[i] = data.data;  替换对象不会自动刷新
            //最好是直接属性赋值
            order.customer = data.data.customer;
            order.phone = data.data.phone;
            order.address = data.data.address;
            order.information = data.data.information;

            //发送请求修改后台数据......

            let params = new URLSearchParams();
            params.append("id", order.id);
            params.append("customer", order.customer);
            params.append("phone", order.phone);
            params.append("address", order.address);
            params.append("information", order.information);
            console.log("修改内容:" + params);
           

             axios
              .post("http://192.168.11.18:8080/serverOrder/updateById", params)
              .then((res) => {
                console.log(res);
              });
           
            

            break;
          }
        }
      }
      
      
    },
     // 排序按钮
    priceBtnUp() {
      if(this.sortCol==1) {
        this.sortCol = "price";
      } else {
        this.sortCol = "time";
      }
      
      this.rule = "asc";
      http
        .get(
          "http://192.168.11.18:8080/serverOrder/sorting/" +
            this.sortCol +
            "/" +
            this.rule +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
    },
    priceBtnDown() {
      if (this.sortCol==1) {
        this.sortCol="price"
      } else {
        this.sortCol="time"
      }
    
      this.rule = "desc";
      http
        .get(
          "http://192.168.11.18:8080/serverOrder/sorting/" +
            this.sortCol +
            "/" +
            this.rule +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
         
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
    },
    unPay(){
      console.log("未支付");
      this.payStatus=0
      http
        .get(
          "http://192.168.11.18:8080/serverOrder/payStatus/" +
            this.payStatus +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
    },
    pay(){
      console.log("已支付");
      this.payStatus=1
      http
        .get(
          "http://192.168.11.18:8080/serverOrder/payStatus/" +
            this.payStatus +
            "/" +
            this.pageData.pageSize +
            "/" +
            this.pageData.currentPage
        )
        .then(({ data }) => {
          console.log(data);
          let resutl = data.data;
          let array = new Array(resutl.data.length);

          for (let i = 0; i < array.length; i++) {
            if (resutl.data[i].status == 0) {
              array[i] = resutl.data[i];
            }
          }
          this.pageData.data = array;
          this.pageData.total = resutl.total;
          this.pageData.currentPage = resutl.totalPages;
          this.pageData.pageSize = resutl.pageSize;
          this.pageData.currentPage = resutl.currentPage;
        });
    }

  },
};
</script>

<style scoped>
/* #btn{
   margin: 0;
padding: 0;
   position:relative;
        right: 100px; 
         bottom: 1px; 
        left: 100px;
 } */
</style>
